<template>
  <el-dialog
    title="新增工单"
    :visible="visible"
    width="40%"
    :before-close="handleClose"
  >
    <el-form :model="addform" ref="form" :rules="rules" class="form">
      <el-form-item
        label="设备编号"
        :label-width="formLabelWidth"
        prop="innerCode"
      >
        <el-input
          v-model="addform.innerCode"
          autocomplete="off"
          show-word-limit
          maxlength="15"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="工单类型"
        :label-width="formLabelWidth"
        prop="productType"
      >
        <el-select v-model="addform.productType" placeholder="请选择">
          <el-option label="补货工单" value="补货工单"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运维人员"
        :label-width="formLabelWidth"
        prop="userName"
      >
        <el-select v-model="addform.userName" placeholder="请选择">
          <el-option label="暂无数据" value="暂无数据"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注" :label-width="formLabelWidth" prop="desc">
        <el-input
          placeholder="(输入不超过40个字)"
          v-model="addform.desc"
          autocomplete="off"
          type="textarea"
          show-word-limit
          maxlength="40"
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="submit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: "DikedePcDialogInfo",
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      formLabelWidth: "80px",
      addform: {},
      rules: {
        innerCode: [
          { required: true, message: "设备编号必填", trigger: "blur" },
          { max: 15, message: "最大输入15位", trigger: "blur" },
        ],
        productType: [
          { required: true, message: "工单类型必填", trigger: "change" },
        ],
        userName: [
          { required: true, message: "运营人员必填", trigger: "change" },
        ],
        desc: [
          { required: true, message: "设备编号必填", trigger: "blur" },
          { max: 40, message: "最大输入40位", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {},

  methods: {
    handleClose() {
      this.$emit("update:visible", false);
      this.$refs.form.resetFields();
      this.addform = {};
    },
    submit() {},
  },
};
</script>

<style lang="scss" scoped>
.form {
  text-align: center;
  ::v-deep .el-form-item {
    ::v-deep .el-form-item__label {
      text-align: center;
      display: flex;
      justify-content: start;
      ::v-deep .el-input__inner {
        transform: translateX(-50px);
      }
    }
  }
}
</style>
